<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜谱详情页</title>
    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <link href="../../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="../../css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- js -->
    <script src=../../js/jquery-1.11.1.min.js "></script>
    <script src="../../js/vue.js"></script>
    <!-- //js -->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript ">
        jQuery(document).ready(function($) {
            $(".scroll ").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
</head>

<body>
   <div id="app">
         <!-- header -->
    <div class="header ">
        <div class="container ">
            <div class="header-nav ">
                <nav class="navbar navbar-default ">
                    <div class="navbar-header ">
                        <a class="navbar-brand " href="index.html "><img src="../../images/logo.png "></a>
                    </div>
                    <div class="collapse navbar-collapse nav-wil " id="bs-example-navbar-collapse-1 ">
                        <ul class="nav navbar-nav ">
                            <li class="hvr-bounce-to-bottom "><a href="../../index.html ">主页</a></li>
                            <li class="hvr-bounce-to-bottom "><a href="../../about.html ">关于</a></li>
                            <li class="hvr-bounce-to-bottom active "><a href="../../menu.html ">菜谱</a></li>
                            <li class="hvr-bounce-to-bottom "><a href="../../blog.html ">论坛交流</a></li>
                            <li class="hvr-bounce-to-bottom "><a href="../../contact.html ">发布</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="login.html">登录</a></li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </div>
    <!-- //header -->

    <!-- menuContent -->
    <div class="single ">
        <div class="container ">
            
            <h3 class="cp_name ">{{detail.food_name}}</h3>
            <div class="single-left ">
                <p></p>
                <img :src="detail.img_url" alt=" " class="img-responsive " />
                <div class="reply" v-if="auth=='1'">
                    <a @click="getDelete(detail.id)">删除</a>
                </div>
                <div class="reply" v-if="auth=='1'">
                    <a @click="getUpdate(detail.id)">修改</a>
                </div>
            </div>
            
            <div class="single-right ">
                <h4>食材准备</h4>
                <p> <span class="cp_shicai ">{{detail.ingredient}}</span>
                </p>
                <h4>注意事项</h4>
                <p><span class="cp_warning ">{{detail.remind}}</span>
                </p>
            </div>
            <div class="clearfix "> </div>
            <p class="tortor ">{{detail.desc}}
            </p>
           
        </div>
    </div>
    <!-- //menuContent -->
    <!--- footer --->
    <div class="footer ">
        <div class="container ">
            <div class="footer-grids ">
                <div class="col-md-4 footer-grid ">
                    <h3>关于我们</h3>
                </div>
                <div class="col-md-4 footer-grid ">
                    <h3>用户协议</h3>
                </div>
                <div class="col-md-4 footer-grid ">
                    <h3>隐私政策</h3>
                </div>
                
                <div class="clearfix "> </div>
            </div>
        </div>
    </div>
    <div class="clear "> </div>
    <div class="copy-right ">
        <p>Copyright &copy; 2022.美食网站版权所有</p>
    </div>
    <!--- //footer --->
    <!-- for bootstrap working -->
    <script src="../../js/bootstrap.js ">
    </script>
    <!-- //for bootstrap working -->
   </div>
</body>
<script>
        new Vue({
            el:"#app",
            data:{
                auth:"",
                hello:"helloWorld",
                id:"",
                detail:""
                
            },
            // 创建就运行
            async created() {
                this.isAdmin()
                this.getIdFromUrl()
                this.getDetail()

            },
            // 方法
            methods: {
                //判断是否是管理员
                isAdmin(){
                    this.auth = sessionStorage.getItem("auth")
                },
                 // 从url获取id
                getIdFromUrl() {  
                    const searchParams = new URLSearchParams(window.location.search);  
                    this.id = searchParams.get('id');  
                },
                // get请求
                async getDetail(){
                 
                    const response =  await fetch('http://127.0.0.1:5001/food/detail?id='+this.id)
                    const data = await response.json();
                    // 给数据赋值
                    this.detail =  data.data[0]

                },
                //删除
                async getDelete(id){
                    console.log(id)
                    const response =  await fetch('http://127.0.0.1:5001/food/deleteById?id='+id)
                    const data = await response.json();
                    if(data.code == 200){
                        alert("删除成功")
                        window.location.href = "http://127.0.0.1:5500/menu.html"
                    }
                    
                },
                //修改
                async getUpdate(id){
                    console.log(id)
                    window.location.href = "../../contact.html?foodId="+id
                }
               
            }
        })
</script>
</html>